<template>
	<view class="box">
		<view class="header">
			<view class="money">
				+{{formData.receivable_amount}}
			</view>
		</view>
		<view class="card">
			<view class="row">
				<view class="title">
					入款账单金额
				</view>
				<view class="data">
					{{formData.receivable_amount}}
				</view>
			</view>
			<view class="row_">
				<view class="title_">
					小区名称
				</view>
				<view class="data_">
					{{formData.name}}
				</view>
			</view>
			<view class="row_">
				<view class="title_">
					房屋详情
				</view>
				<view class="data_">
					{{formData.building_number}}幢/栋{{formData.unit_number}}单元{{formData.floor}}楼{{formData.ventricle_number}}室{{formData.room_number}}房号
				</view>
			</view>
			<view class="row_">
				<view class="title_">
					租客姓名
				</view>
				<view class="data_">
					{{formData.tenant_name}}
				</view>
			</view>
			<view class="row_">
				<view class="title_">
					租客手机
				</view>
				<view class="data_">
					{{formData.tenant_phone}}
				</view>
			</view>
			<view class="row_">
				<view class="title_">
					交易日期
				</view>
				<view class="data_">
					{{formData.receivable_date}}
				</view>
			</view>
			<view class="row_">
				<view class="title_">
					账单类别
				</view>
				<view class="data_">
					{{formData.collection_channel || '线下支付'}}
				</view>
			</view>
			<view class="tag_box">
				<view class="tag" v-if="formData.pay_status ==1">
					已支付
				</view>
				<view class="tag" v-if="formData.pay_status ==0">
					未支付
				</view>
			</view>
		</view>
	<!-- 	<view class="item">
			<u-cell title="租约相关来往记录" isLink url="./recording" ></u-cell>
		</view> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getSelectHouseBillDetail} from "@/api/my/index.js";
	export default {
		data() {
			return {
				formData: {
					money: '1,300.00',
					data: '相悦花园',
					unit: '2单元106室',
					name: '项家家',
					phone: '1888***885',
					tiem: '2024-01-01 10:12',
					payment: '线下收款'
				}
			}
		},
		onLoad(optien){
			this.selectHouseBillDetail(optien.id)
		},
		methods: {
			async selectHouseBillDetail(id){
			const res = await getSelectHouseBillDetail(id)
			if (res.data.code == 200) {
				this.formData = res.data.data[0]
			} else{
				this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				})
			}
			},
			recording() {
				uni.navigateTo({
					url: './recording',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/global.scss";
	@import "~@/styles/index.scss";

	.box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: $pagebgc;
		position: absolute;

		.header {
			@include flexCenter;
			width: 100%;
			height: 20%;
			position: absolute;
			background-color: #3c9cff;

			.money {
				font-weight: bold;
				color: #fff;
				font-size: 50rpx;
			}
		}

		.card {
			z-index: 1;
			position: relative;
			top: 280rpx;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;

			.row {
				@include flexBetween;
				padding: 30rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #f06d6d;
			}

			.row_ {
				@include flexBetween;
				padding: 30rpx;
				font-size: 28rpx;
				font-weight: bold;

				.title_ {
					color: $noimportant;
				}
			}

			.tag_box {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin: 30rpx;

				.tag {
					background-color: #fce1e1;
					color: #6f6f6f;
					font-size: 24rpx;
					padding: 5rpx 10rpx;
					border-radius: 5rpx;
				}
			}
		}

		.item {
			background-color: #fff;
			position: relative;
			z-index: 1;
			font-weight: bold;
			top: 290rpx;
		}
	}
</style>